<!DOCTYPE HTML>
<html>
  	<head>
	    <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
	    <title>Les petits mots</title>
	    <meta charset="utf-8"> 
	 	<link rel="stylesheet" href="jquery.ui/jquery-ui-1.10.3.custom.min.css" />
	 	<link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css" />
	 	<link rel="stylesheet" href="css/style.css" />
	    <script src="jquery/jquery-1.10.2.min.js"></script>
	    <script src="jquery.ui/jquery-ui-1.10.3.custom.min.js"></script>
		<script src="jquery/jquery.mobile-1.3.2.min.js"></script>
		<script src="jquery.ui/jquery.ui.touch-punch.min.js"></script>
		<script>
			// Le script de cordova ne doit pas être ajouter sur les navigateurs web
			if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|IEMobile)/)) {
				document.write("<script src='cordova.js'><\/script>");
			}
		</script>
		<script type="text/javascript" charset="utf-8" src="js/resources.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/init.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/progress.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/jeu1.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/jeu2.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/imageList.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/audio.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/localStorage.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/parameter.js"></script>
	</head>
  
  	<body>
		<!-- Home -->
		<div data-role="page" id="home">
		    <div data-theme="a" data-role="header">
		        <a data-role="button" href="#params" data-icon="gear" data-iconpos="left" class="ui-btn-left">Config</a>
		        <a data-role="button" data-inline="true" href="#" data-icon="back" data-iconpos="left" class="ui-btn-right" id="btnLeave">Quitter</a>
		        <h3>Les petits mots</h3>
		    </div>
		    <div data-role="content">
		    	<img alt="Les Petits Mots" src="img/LesPetitsMots.png" class="logo">
		        <a data-role="button" href="#wordChooser" data-icon="star" data-iconpos="left" id="game1">Construction de mots</a>
		        <a data-role="button" href="#wordChooser" data-icon="star" data-iconpos="left" id="game2">Puzzle</a>
		        <a data-role="button" href="#listWords"   data-icon="search" data-iconpos="left">Liste des mots</a>
		        <a data-role="button" href="#progress"    data-icon="check"   data-iconpos="left" id="btnProgress">Ma progression</a>
		    </div>
		</div> <!-- Fin Home -->
		
		<!-- Paramètrage -->
		<div data-role="page" id="params">
		    <div data-theme="a" data-role="header">
		        <a data-role="button" data-inline="true" href="#home" data-icon="home" data-iconpos="left" class="ui-btn-right">Accueil</a>
		        <h3>Config</h3>
		    </div>
		    <div data-role="content">
		    	<h3>Réglage du volume en %</h3>
		        <input type="range" id="sliderSound" value="70" min="0" max="100" data-highlight="true" />
		        <h3>Autres actions</h3>
		        <a href="#popupDialogConfig" data-rel="popup" data-theme="b" data-role="button" data-icon="delete" data-iconpos="right" class="ui-btn-center">Réinitialiser toute ma progression</a>
			    <div data-role="popup" id="popupDialogConfig" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all ui-popup ui-body-c ui-overlay-shadow">
					<div data-role="header" data-theme="a" class="ui-corner-top ui-header ui-bar-a" role="banner">
						<h1 class="ui-title" role="heading" aria-level="1">Réinitialiser la progression ?</h1>
					</div>
				    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content ui-body-d" role="main">
						<h3 class="ui-title">Etes vous sur de vouloir réinitialiser la progression?</h3>
						<p>Cette action ne peu pas être annulé.</p>
						<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c" >Non</a>    
						<a id="resetLocalStorage" href="#" data-role="button" data-inline="true" data-theme="b" >Oui</a>  
					</div>
				</div>
		    </div>
		</div> <!-- Fin Paramètrage -->
		
		<!-- Choix du mot par l'image -->
		<div data-role="page" id="wordChooser">
		    <div data-theme="a" data-role="header">
		        <a data-role="button" href="#params" data-icon="gear" data-iconpos="left" class="ui-btn-left">Config</a>
		        <a data-role="button" data-inline="true" href="#home" data-icon="home" data-iconpos="left" class="ui-btn-right">Accueil</a>
		        <h3>Fait ton choix</h3>
		    </div>
		    <div data-role="content">
		    </div>
		</div> <!-- Fin Choix du mot par l'image -->
		
		<!-- Choix du niveau -->
		<div data-role="page" id="levelChooser">
		    <div data-theme="a" data-role="header">
		        <a data-role="button" href="#params" data-icon="gear" data-iconpos="left" class="ui-btn-left">Config</a>
		        <a data-role="button" data-inline="true" href="#home" data-icon="home" data-iconpos="left" class="ui-btn-right">Accueil</a>
		        <h3>Choix du niveau</h3>
		    </div>
		    <div data-role="content">
	    		<div data-role="fieldcontain">
			     	<input type="radio" name="level" id="radio-choice-1" value="1" checked="checked" />
			     	<label for="radio-choice-1">Niveau 1</label>
			
			     	<input type="radio" name="level" id="radio-choice-2" value="2"  />
			     	<label for="radio-choice-2">Niveau 2</label>
			
			     	<input type="radio" name="level" id="radio-choice-3" value="3"  />
			     	<label for="radio-choice-3">Niveau 3</label>
			     	<a data-role="button" type="submit" data-theme="e" id="playBtn">Jouer !</a>
				</div>
		    </div>
		</div> <!-- Fin Choix du niveau -->
		
		<!-- Jeu 1 -->
		<div data-role="page" id="game1">
		    <div data-theme="a" data-role="header">
		        <a data-role="button" href="#params" data-icon="gear" data-iconpos="left" class="ui-btn-left">Config</a>
		        <a data-role="button" data-inline="true" href="#home" data-icon="home" data-iconpos="left" class="ui-btn-right">Accueil</a>
		        <h3>Reforme le mot</h3>
		    </div>
		    <div data-role="content-primary" >
		    
		    </div>
		    <div class="content-secondary">
		   		<a id="successGame1" style="display:none;" href="#popupMenuGame1" data-rel="popup" data-position-to="window" data-role="button" data-transition="flip"></a>
			    <div data-role="popup" id="popupMenuGame1" data-theme="a" data-dismissible="false" class="popupMenuGames">
					<ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="b">
						<li data-role="divider" data-theme="a" >Bravo !</li>
						<li><a class="playSoundGame" href="#">Ecouter</a></li>
						<li><a class="setNextGame" href="#">Suivant</a></li>
						<li><a href="#home">Menu</a></li>
					</ul>
				</div>
		    </div>
		</div> <!-- Fin Jeu 1 -->
		
	    
		<!-- Jeu 2 -->
		<div data-role="page" id="game2">
		    <div data-theme="a" data-role="header">
		        <a data-role="button" href="#params" data-icon="gear" data-iconpos="left" class="ui-btn-left">Config</a>
		        <a data-role="button" data-inline="true" href="#home" data-icon="home" data-iconpos="left" class="ui-btn-right">Accueil</a>
		        <h3>Puzzle</h3>
		    </div>
		    <div data-role="content-primary">
		        <div data-role="popup" data-overlay-theme="a" data-position-to="window" data-transition="pop" id="popupInfoJeu2" class="ui-content" data-theme="e">
					<p>Clique sur l'image pour commencer la partie</p>
				</div>
		        
		        <canvas id="canvasGame2">
		        </canvas>
		        
		        <div class="partyInformation">
			        <div id="numberHits">
			        	<p>
				        	Tu en es à <span id="numHits">0</span> coup<span id="pluralCurrentHitNumber"></span><br />
				        	<span id="numHitsRec">Ton record est de <span id="recHits"></span> coup<span id="pluralReccordHitNumber"></span></span>
			        	</p>
			        </div>
			        <div id="timeSpentPuzzle">
		        		<span id="timeSpentReccord">Temps reccord <span id="recTimeSpent">00:00</span></span>
			        </div>
		        </div>
		    </div>
		    <div data-role="content-secondary">
				<a id="successGame2" style="display:none;" href="#popupMenuGame2" data-rel="popup" data-position-to="window" data-role="button" data-transition="flip"></a>
			    <div data-role="popup" id="popupMenuGame2" data-theme="a" data-dismissible="false" class="popupMenuGames">
					<ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="b">
						<li data-role="divider" data-theme="a" >Bravo !</li>
						<li data-role="divider" data-theme="a" id="displayFinalTime" ></li>
						<li><a class="playSoundGame" href="#">Ecouter</a></li>
						<li><a class="setNextGame" href="#">Suivant</a></li>
						<li><a href="#home">Menu</a></li>
					</ul>
				</div>
		    </div>
		</div> <!-- Fin Jeu 2 -->
		
		<!-- Liste des mots -->
		<div data-role="page" id="listWords">
		    <div data-theme="a" data-role="header">
		        <a data-role="button" href="#params" data-icon="gear" data-iconpos="left" class="ui-btn-left">Config</a>
		        <a data-role="button" data-inline="true" href="#home" data-icon="home" data-iconpos="left" class="ui-btn-right">Accueil</a>
		        <h3>Les petits mots</h3>
		    </div>
		    <div data-role="content">
		        
		    </div>
		</div> <!-- Fin Liste des mots -->
		
		<!-- Progression -->
		<div data-role="page" id="progress">
		    <div data-theme="a" data-role="header">
		        <a data-role="button" href="#params" data-icon="gear" data-iconpos="left" class="ui-btn-left">Config</a>
		        <a data-role="button" data-inline="true" href="#home" data-icon="home" data-iconpos="left" class="ui-btn-right">Accueil</a>
		        <h3>Ma progression</h3>
		    </div>
		    <div data-role="content">
		    	<h3>Progression totale</h3>
		    	<div id="totalProgressBar"></div>
		    	
		    	<div data-role="collapsible-set" data-content-theme="c">
				    <div data-role="collapsible" data-theme="b" data-content-theme="b">
				        <h3>Jeu de construction de mots</h3>
				        <h4>Niveau 1</h4>
						<div id="game1Level1ProgressBar"></div>
						<h4>Niveau 2</h4>
						<div id="game1Level2ProgressBar"></div>
						<h4>Niveau 3</h4>
						<div id="game1Level3ProgressBar"></div>        
				    </div>
				    <div data-role="collapsible" data-theme="e" data-content-theme="d">
				        <h3>Puzzle</h3>
				        <h4>Niveau 1</h4>
						<div id="game2Level1ProgressBar"></div>
						<h4>Niveau 2</h4>
						<div id="game2Level2ProgressBar"></div>
						<h4>Niveau 3</h4>
						<div id="game2Level3ProgressBar"></div>
				    </div>
				</div>
		    </div>
		</div> <!-- Fin Progression -->
		
		<script type="text/javascript" charset="utf-8" src="apis/accelerometer.js"></script>
		<script type="text/javascript" charset="utf-8" src="apis/camera.js"></script>
		<script type="text/javascript" charset="utf-8" src="apis/capture.js"></script>
		<script type="text/javascript" charset="utf-8" src="apis/compass.js"></script>
		<script type="text/javascript" charset="utf-8" src="apis/connection.js"></script>
		<script type="text/javascript" charset="utf-8" src="apis/contacts.js"></script>
		<script type="text/javascript" charset="utf-8" src="apis/device.js"></script>
		<script type="text/javascript" charset="utf-8" src="apis/events.js"></script>
		<script type="text/javascript" charset="utf-8" src="apis/file.js"></script>
		<script type="text/javascript" charset="utf-8" src="apis/geolocation.js"></script>
		<script type="text/javascript" charset="utf-8" src="apis/media.js"></script>
		<script type="text/javascript" charset="utf-8" src="apis/notification.js"></script>
		<script type="text/javascript" charset="utf-8" src="apis/storage.js"></script> 			
  	</body>
</html>
